<template>
  <div class="file-table-wrapper" @mousedown="cancelRightClickMenu">
    <el-table
      ref="multipleTable"
      class="file-table"
      :class="['file-type-0']"
      :data="fileList"
      v-loading="loading"
      element-loading-text="文件加载中……"
      tooltip-effect="dark"
      :highlight-current-row="true"
      @selection-change="handleSelectRow"
      @row-contextmenu="handleContextMenu"
      @contextmenu.prevent
    >
      <el-table-column
        type="selection"
        key="selection"
        width="56"
        align="center"
        v-if="true"
      ></el-table-column>
      <el-table-column
        label
        prop="isDir"
        key="isDir"
        :width="56"
        align="center"
        class-name="file-icon-column"
        ><template #default="scope">
          <table-img-item :item="scope.row"></table-img-item>
        </template> </el-table-column
      ><el-table-column
        prop="fileName"
        key="fileName"
        :sort-by="['isDir', 'fileName']"
        sortable
        show-overflow-tooltip
        ><template #header>
          <span>文件名</span>
        </template>
        <!-- <template #default="scope">
          <span
            @click="handleFileNameClick(scope.row)"
          ></span></template> --> </el-table-column
      ><el-table-column
        label="类型"
        width="80"
        prop="extName"
        key="extName"
        :sort-by="['isDir', 'extName']"
        sortable
        show-overflow-tooltip
      >
        <template #default="scope">
          <span>{{ scope.row.fileExtend.fileType }}</span>
        </template></el-table-column
      ><el-table-column
        label="大小"
        width="100"
        prop="fileSize"
        key="fileSize"
        :sort-by="['isDir', 'fileSize']"
        sortable
        align="right"
        ><template #default="scope">
          {{ scope.row.isDir === 0 ? scope.row.fileSize : "" }}
        </template></el-table-column
      ><el-table-column
        label="修改日期"
        prop="updatedTime"
        key="updatedTime"
        width="160"
        :sort-by="['isDir', 'updatedTime']"
        sortable
        align="center"
      ></el-table-column
    ></el-table>
    <rightBox
      v-show="rightBoxVisable"
      ref="rightBoxMenu"
      @close="close"
    ></rightBox>
  </div>
</template>

<script setup>
import TableImgItem from "./TableImgItem.vue";
import rightBox from "../box/contextMenu/Box.vue";
import fileListPinia from "@/store/modules/fileList";
import { getCurrentInstance } from "@vue/runtime-core";

const store = fileListPinia();
const rightBoxMenu = ref(null);
const multipleTable = ref(null);
const rightBoxVisable = ref(false);
const currentInstance = getCurrentInstance();
const props = defineProps({
  fileList: {
    type: Array,
  },
  loading: {
    type: Boolean,
  },
});
/**
 * 表格选择项发生变化时的回调函数
 * @param {[]} selection 勾选的行数据
 */
function handleSelectRow(selection) {
  store.changeSelectedFiles(selection);
  store.changeIsBatchOperation(selection.length !== 0);
}

function handleContextMenu(row, column, event) {
  //如果之前已经打开了先关闭一下。
  rightBoxVisable.value = false;
  setTimeout(() => {
    rightBoxVisable.value = true;
  }, 300);
  rightBoxMenu.value.onload(row, column, event);
  const table = multipleTable.value;
  table.setCurrentRow(row);
}
//左键点击取消右键菜单界面
function cancelRightClickMenu(e) {
  if (
    e.button === 0 &&
    rightBoxVisable.value === true &&
    e.path[1].id !== "right-key-menu"
  ) {
    rightBoxVisable.value = false;
  }
}
function close() {
  rightBoxVisable.value = false;
}
</script>

<style lang="stylus" scoped>
.file-table-wrapper {
  margin-top: 3px;
  padding: 0px 16px;

  .file-type-0 {
    height: calc(100vh - 206px) !important;

    >>> .el-table__body-wrapper {
      height: calc(100vh - 262px) !important;
    }
  }

  .file-type-6 {
    height: calc(100vh - 211px) !important;

    >>> .el-table__body-wrapper {
      height: calc(100vh - 263px) !important;
    }
  }

  .file-table.share {
    height: calc(100vh - 109px) !important;

    >>> .el-table__body-wrapper {
      height: calc(100vh - 161px) !important;
    }
  }

  .file-table {
    width: 100% !important;
    height: calc(100vh - 203px);

    >>> .el-table__header-wrapper {
      th {
        // background: $tabBackColor;
        padding: 4px 0;
        color: #606266;
      }

      .el-icon-circle-plus, .el-icon-remove {
        margin-left: 6px;
        cursor: pointer;
        font-size: 16px;

        &:hover {
          color: $Primary;
        }
      }
    }

    >>> .el-table__body-wrapper {
      height: calc(100vh - 255px);
      overflow-y: auto;
      setScrollbar(6px, transparent, #C0C4CC);

      td {
        padding: 8px 0;

        .file-name {
          .keyword {
            color: $Danger;
          }
        }
      }

      .el-icon-warning {
        font-size: 16px;
        color: $Warning;
      }

      .el-icon-time {
        font-size: 16px;
        color: $Success;
      }
    }
  }
}

.right-menu-list {
  position: fixed;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid $BorderLighter;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  z-index: 2;
  padding: 4px 0;
  color: #606266;

  .right-menu-item, .unzip-item {
    padding: 0 16px;
    height: 36px;
    line-height: 36px;
    cursor: pointer;

    &:hover {
      background: $PrimaryHover;
      color: $Primary;
    }

    i {
      margin-right: 8px;
    }
  }

  .unzip-menu-item {
    position: relative;

    &:hover {
      .unzip-list {
        display: block;
      }
    }

    .unzip-list {
      position: absolute;
      display: none;

      .unzip-item {
        width: 200px;
        setEllipsis(1);
      }
    }
  }
}

.right-menu-list, .unzip-list {
  background: #fff;
  border: 1px solid $BorderLighter;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  z-index: 2;
  padding: 4px 0;
  color: #606266;
}
</style>